Skip to main content
Version: Next

Notification

Overview

Display a notification message globally.

When To Use

To display a notification message at any of the four corners of the viewport. Typically it can be used in the following cases:

  • A notification with complex content.
  • A notification providing a feedback based on the user interaction. Or it may show some details about upcoming steps the user may have to follow.
  • A notification that is pushed by the application.

We have overwritten some classes of the antd library to be able to display as project design such as:

  • ant-notification
  • ant-notification-notice
  • ant-notification-notice-success
  • ant-notification-notice-error
  • ant-notification-notice-info
  • ant-notification-notice-warning
Because antd often has new updates, these css overrides may be corrupted if you upgrade antd version compared to when we made this document. So please check the css again if you upgrade antd version.

How To Use

import { notification } from 'antd';

notification.success({
message: 'これは乾杯のメッセージです',
description: '乾杯メッセージの詳細',
});

References

Ant design - Notification